/* eslint-disable */
/**
 * Created by GYL on 2018/8/24
 */
//项目班子搭建-编辑
import React, { Component } from 'react';
import styles from './index.less';
import { Icon,  Form, Row, Col, TreeSelect,  Spin, Breadcrumb, Divider } from 'antd';
import config from '../../../config';
const { SHOW_CHILD } = TreeSelect;

const IconFont = Icon.createFromIconfontCN({
    scriptUrl: '//at.alicdn.com/t/font_1315525_f8lqdqjh676.js',
});

class Edit_Wrap extends Component {

    constructor(props) {
        super(props)

    }

    componentDidMount() {

    }

    state = {
        treeArr: [],
        selectedRowKeys: [],
        arr: [
            {
                type: 'title',
                name: "工程部",
                span: 24,
                icon: 'icon-gongcheng1'
            },
            {
                type: 'treeSelect',
                paramName: 'areaManager',
                id: 'areaManager',
                title: '最多显示200个字',
                num: 200,
                key: "areaManager",
                label: '区域负责人',
                rules: [{ ...config.reg.required }],
                treeCheckable: true,
                span: 8,
                rows: 2,

                style: { width: 350 },
                shuoming: styles.regionalLeader,
                treeData: this.props.treeArr,
                initialValue: this.props.AddData.areaManager
            },
            {
                type: 'treeSelect',
                paramName: 'regionalLeader',
                id: 'regionalLeader',
                title: '最多显示200个字',
                num: 200,
                key: "regionalLeader",
                label: '大区负责人',
                rules: [{ ...config.reg.required }],
                treeCheckable: true,
                span: 8,
                rows: 2,

                style: { width: 350 },
                shuoming: styles.regionalLeader,
                treeData: this.props.treeArr,
                initialValue: this.props.AddData.regionalLeader

            },
            {
                type: 'treeSelect',
                paramName: 'projectLeader',
                id: 'projectLeader',
                title: '最多显示200个字',
                num: 200,
                key: "projectLeader",
                label: '项目负责人',
                rules: [{ ...config.reg.required }],
                treeCheckable: false,
                span: 8,
                rows: 2,

                style: { width: 350 },
                shuoming: styles.regionalLeader,
                treeData: this.props.treeArrgonghao,
                initialValue: this.props.AddData.projectLeader

            },
            {
                type: 'treeSelect',
                paramName: 'constructionSupervision',
                id: 'constructionSupervision',
                title: '最多显示200个字',
                num: 200,
                key: "constructionSupervision",
                label: '项目施工管理人员',
                // rules: [{ ...config.reg.required }],
                treeCheckable: true,
                span: 9,
                rows: 2,

                style: { width: 350 },
                shuoming: styles.regionalLeader,
                treeData: this.props.treeArr,
                initialValue: this.props.AddData.constructionSupervision
            },
            {
                type: 'title',
                name: "技术部",
                span: 24,
                icon: 'icon-jishu'
            },
            {
                type: 'treeSelect',
                paramName: 'technicalManager',
                id: 'technicalManager',
                title: '最多显示200个字',
                num: 200,
                key: "technicalManager",
                label: '技术部门经理',
                rules: [{ ...config.reg.required }],
                treeCheckable: true,
                span: 8,
                rows: 2,

                style: { width: 350 },
                shuoming: styles.regionalLeader,
                treeData: this.props.treeArr,
                initialValue: this.props.AddData.technicalManager
            },
            {
                type: 'treeSelect',
                paramName: 'chiefEngineer',
                id: 'chiefEngineer',
                title: '最多显示200个字',
                num: 200,
                key: "chiefEngineer",
                label: '总工程师',
                rules: [{ ...config.reg.required }],
                treeCheckable: true,
                span: 8,
                rows: 2,

                style: { width: 350 },
                shuoming: styles.regionalLeader,
                treeData: this.props.treeArr,
                initialValue: this.props.AddData.chiefEngineer
            },
            {
                type: 'treeSelect',
                paramName: 'technicalDirector',
                id: 'technicalDirector',
                title: '最多显示200个字',
                num: 200,
                key: "technicalDirector",
                label: '技术负责人',
                rules: [{ ...config.reg.required }],
                treeCheckable: false,
                span: 8,
                rows: 2,

                style: { width: 350 },
                shuoming: styles.regionalLeader,
                treeData: this.props.treeArrgonghao,
                initialValue: this.props.AddData.technicalDirector
            },
            {
                type: 'treeSelect',
                paramName: 'technicalSupport',
                id: 'technicalSupport',
                title: '最多显示200个字',
                num: 200,
                key: "technicalSupport",
                label: '项目技术支持',
                // rules: [{ ...config.reg.required }],
                treeCheckable: true,
                span: 8,
                rows: 2,

                style: { width: 350 },
                shuoming: styles.regionalLeader,
                treeData: this.props.treeArr,
                initialValue: this.props.AddData.technicalSupport
            },

            {
                type: 'title',
                name: "设备部",
                span: 24,
                icon: 'icon-shebei-hei'
            },
            {
                type: 'treeSelect',
                paramName: 'equipmentManager',
                id: 'equipmentManager',
                title: '最多显示200个字',
                num: 200,
                key: "equipmentManager",
                label: '设备部经理',
                rules: [{ ...config.reg.required }],
                treeCheckable: true,
                span: 8,
                rows: 2,

                style: { width: 350 },
                shuoming: styles.regionalLeader,
                treeData: this.props.treeArr,
                initialValue: this.props.AddData.equipmentManager
            },
            {
                type: 'treeSelect',
                paramName: 'equipmentEngineer',
                id: 'equipmentEngineer',
                title: '最多显示200个字',
                num: 200,
                key: "equipmentEngineer",
                label: '设备工程师',
                // rules: [{ ...config.reg.required }],
                treeCheckable: true,
                span: 8,
                rows: 2,

                style: { width: 350 },
                shuoming: styles.regionalLeader,
                treeData: this.props.treeArr,
                initialValue: this.props.AddData.equipmentEngineer
            },
            {
                type: 'treeSelect',
                paramName: 'technicalEngineer',
                id: 'technicalEngineer',
                title: '最多显示200个字',
                num: 200,
                key: "technicalEngineer",
                label: '设备专员',
                // rules: [{ ...config.reg.required }],
                treeCheckable: true,
                span: 8,
                rows: 2,

                style: { width: 350 },
                shuoming: styles.regionalLeader,
                treeData: this.props.treeArr,
                initialValue: this.props.AddData.technicalEngineer
            },

            {
                type: 'title',
                name: "安全管理",
                span: 24,
                icon: 'icon-anquan'
            },
            {
                type: 'treeSelect',
                paramName: 'districtHead',
                id: 'districtHead',
                title: '最多显示200个字',
                num: 200,
                key: "districtHead",
                label: '片区安全负责人',
                rules: [{ ...config.reg.required }],
                treeCheckable: true,
                span: 8,
                rows: 2,

                style: { width: 350 },
                shuoming: styles.regionalLeader,
                treeData: this.props.treeArr,
                initialValue: this.props.AddData.districtHead
            },
            {
                type: 'treeSelect',
                paramName: 'projectSafety',
                id: 'projectSafety',
                title: '最多显示200个字',
                num: 200,
                key: "projectSafety",
                label: '项目安全员',
                // rules: [{ ...config.reg.required }],
                treeCheckable: true,
                span: 8,
                rows: 2,

                style: { width: 350 },
                shuoming: styles.regionalLeader,
                treeData: this.props.treeArr,
                initialValue: this.props.AddData.projectSafety
            },
            {
                type: 'title',
                name: "招采部",
                span: 24,
                icon: 'icon-huizhaocai'
            },
            {
                type: 'treeSelect',
                paramName: 'forMiningManager',
                id: 'forMiningManager',
                title: '最多显示200个字',
                num: 200,
                key: "forMiningManager",
                label: '招采部经理',
                rules: [{ ...config.reg.required }],
                treeCheckable: true,
                span: 8,
                rows: 2,

                style: { width: 350 },
                shuoming: styles.regionalLeader,
                treeData: this.props.treeArr,
                initialValue: this.props.AddData.forMiningManager
            },
            {
                type: 'treeSelect',
                paramName: 'forMiningCommissioner',
                id: 'forMiningCommissioner',
                title: '最多显示200个字',
                num: 200,
                key: "forMiningCommissioner",
                label: '招采部专员',
                // rules: [{ ...config.reg.required }],
                treeCheckable: true,
                span: 8,
                rows: 2,

                style: { width: 350 },
                shuoming: styles.regionalLeader,
                treeData: this.props.treeArr,
                initialValue: this.props.AddData.forMiningCommissioner
            },
            {
                type: 'title',
                name: "审算部",
                span: 24,
                icon: 'icon-hesuan'
            },
            {
                type: 'treeSelect',
                paramName: 'carefulCalculate',
                id: 'carefulCalculate',
                title: '最多显示200个字',
                num: 200,
                key: "carefulCalculate",
                label: '审算部经理',
                rules: [{ ...config.reg.required }],
                treeCheckable: true,
                span: 8,
                rows: 2,

                style: { width: 350 },
                shuoming: styles.regionalLeader,
                treeData: this.props.treeArr,
                initialValue: this.props.AddData.carefulCalculate
            },
            {
                type: 'treeSelect',
                paramName: 'costOfTheCommissioner',
                id: 'costOfTheCommissioner',
                title: '最多显示200个字',
                num: 200,
                key: "costOfTheCommissioner",
                label: '造价专员',
                // rules: [{ ...config.reg.required }],
                treeCheckable: true,
                span: 8,
                rows: 2,

                style: { width: 350 },
                shuoming: styles.regionalLeader,
                treeData: this.props.treeArr,
                initialValue: this.props.AddData.costOfTheCommissioner
            },
            {
                type: 'title',
                name: "管理层",
                span: 24,
                icon: 'icon-guanli-copy'
            },
            {
                type: 'treeSelect',
                paramName: 'repairOffice',
                id: 'repairOffice',
                title: '最多显示200个字',
                num: 200,
                key: "repairOffice",
                label: '修复办公室',
                // rules: [{ ...config.reg.required }],
                treeCheckable: true,
                span: 8,
                rows: 2,
                disabled: true,
                style: { width: 350 },
                shuoming: styles.regionalLeader,
                treeData: this.props.treeArr,
                initialValue: this.props.AddData.repairOffice
            },
            {
                type: 'treeSelect',
                paramName: 'sectionChief',
                id: 'sectionChief',
                title: '最多显示200个字',
                num: 200,
                key: "sectionChief",
                label: '板块安全负责人',
                // rules: [{ ...config.reg.required }],
                treeCheckable: true,
                span: 8,
                rows: 2,
                disabled: true,
                style: { width: 350 },
                shuoming: styles.regionalLeader,
                treeData: this.props.treeArr,
                initialValue: this.props.AddData.sectionChief
            },
            {
                type: 'treeSelect',
                paramName: 'engineeringManager',
                id: 'engineeringManager',
                title: '最多显示200个字',
                num: 200,
                key: "engineeringManager",
                label: '工程部经理',
                // rules: [{ ...config.reg.required }],
                treeCheckable: true,
                span: 8,
                rows: 2,
                disabled: true,
                style: { width: 350 },
                shuoming: styles.regionalLeader,
                treeData: this.props.treeArr,
                initialValue: this.props.AddData.engineeringManager
            },
            {
                type: 'treeSelect',
                paramName: 'deputyDirector',
                id: 'deputyDirector',
                title: '最多显示200个字',
                num: 200,
                key: "deputyDirector",
                label: '工程部副总监',
                // rules: [{ ...config.reg.required }],
                treeCheckable: true,
                span: 8,
                rows: 2,
                disabled: true,
                style: { width: 350 },
                shuoming: styles.regionalLeader,
                treeData: this.props.treeArr,
                initialValue: this.props.AddData.deputyDirector
            },
            {
                type: 'treeSelect',
                paramName: 'engineeringDirector',
                id: 'engineeringDirector',
                title: '最多显示200个字',
                num: 200,
                key: "engineeringDirector",
                label: '工程总监',
                // rules: [{ ...config.reg.required }],
                treeCheckable: true,
                span: 8,
                rows: 2,
                disabled: true,
                style: { width: 350 },
                shuoming: styles.regionalLeader,
                treeData: this.props.treeArr,
                initialValue: this.props.AddData.engineeringDirector
            },

            {
                type: 'treeSelect',
                paramName: 'generalManager',
                id: 'generalManager',
                title: '最多显示200个字',
                num: 200,
                key: "generalManager",
                label: '总经理',
                // rules: [{ ...config.reg.required }],
                treeCheckable: true,
                span: 8,
                rows: 2,
                disabled: true,
                style: { width: 350 },
                shuoming: styles.regionalLeader,
                treeData: this.props.treeArr,
                initialValue: this.props.AddData.generalManager
            },

        ],
        roleIdArr: [],
        expandIconPosition: 'left',
        title: '添加子事件',
        subEvent: false,
        subEventArr: [],
        sonArrList: [],
        spinning: false

    };


    // 取消保存
    ModalCancel = (type) => {
        let t = this;
        t.setState({
            [type]: false,
            modalBtnLoading: false
        })
    };






    //保存按钮事件
    onModalSave = () => {


        this.props.form.validateFields((errors, values) => {
            if (!errors) {
                this.props.onModalSave(values)
                this.setState({
                    spinning: true
                })
            }



        });

    }



    fanhui = () => {
        this.props.fanhui()
        this.setState({
            spinning: false
        })
    }


    selectedChange(fun, nextParams, paramName, index, value) {
        // console.log(fun, nextParams, paramName, index, value)


        let t = this;
        let params = {};
        params[paramName] = value;
        if (paramName) {
            t.setState({ params }, () => {
            });
        }
        if (typeof fun === "function") {
            fun(value);
            if (nextParams)
                t.props.form.setFieldsValue({
                    [nextParams]: ''
                })
        }
    }

    childFunction = () => {
        this.setState({
            spinning: false
        })

    }




    render() {
        let t = this
        let width = document.body.clientWidth;
        const height = document.body.clientHeight;
        let containerHeight = '76vh';
        let tableHeight = 310;
        if (width > 1367) {
            tableHeight = 380;
            containerHeight = '83vh';
        }

        let { getFieldDecorator } = this.props.form;


        return (

            <div className={styles.addWrap}>
                <div className={styles.warpBox}>

                    <div className={styles.Top_Box}>
                        <span style={{ fontWeight: 700, marginLeft: 10 }}>
                            <Breadcrumb>
                                <Breadcrumb.Item >

                                    <IconFont type="icon-moban" style={{ color: '#28a4b9' }} />
                                    <span>项目班子搭建</span>
                                </Breadcrumb.Item>
                                <Breadcrumb.Item>
                                    <IconFont type="icon-bianji" style={{ color: 'rgb(109, 103, 229)' }} />
                                    <span>编辑-{this.props.projectName}</span>
                                </Breadcrumb.Item>

                            </Breadcrumb></span> <IconFont type="icon-guanbi" onClick={this.fanhui} style={{ marginRight: 10, cursor: 'pointer' }} />

                    </div>
                    <Divider />
                    <div style={{ flex: 1, backgroundColor: '#fff', overflow: 'auto', paddingBottom: 50 }}>
                        <Spin size='lage' spinning={this.state.spinning}>
                            <Form layout={'inline'} style={{ padding: 10, paddingTop: 0 }} >
                                <Row gutter={48} key={55555}>
                                    {
                                        this.state.arr.map((item, index) => {
                                            if (item.type === 'treeSelect') {
                                                return (
                                                    <Col span={item.span || 8} key={index} style={{ height: 76 }}>
                                                        <Form.Item label={item.label} key={item.paramName} className={item.className}>
                                                            {
                                                                getFieldDecorator(item.paramName, {
                                                                    initialValue: item.initialValue ? item.initialValue : null,
                                                                    rules: item.rules || null
                                                                })(
                                                                    <TreeSelect
                                                                        showSearch={true}
                                                                        className={item.shuoming}
                                                                        style={item.style}
                                                                        treeData={item.treeData}
                                                                        onChange={t.selectedChange.bind(t, item.selectChange, item.nextParamName || false, item.paramName)}
                                                                        treeCheckable={item.treeCheckable}
                                                                        showCheckedStrategy={SHOW_CHILD}
                                                                        searchPlaceholder={'请选择'}
                                                                        maxTagCount={5}
                                                                        disabled={item.disabled}
                                                                        dropdownStyle={{ maxHeight: '50vh' }}
                                                                    />
                                                                )
                                                            }
                                                        </Form.Item>
                                                    </Col>
                                                )
                                            } else if (item.type === 'title') {
                                                return (
                                                    <Col span={item.span || 8} key={index}>
                                                        <h2 style={{ fontSize: 14, fontWeight: 700, position: 'relative', marginBottom: 0, marginTop: 10, backgroundColor: '#eff4f980' }}><span style={{ padding: 1, color: "#fff", backgroundColor: "#03a9f4", position: 'absolute', left: '-16px', width: 5, height: 20 }}> </span><IconFont type={item.icon} style={{ color: 'rgb(109, 103, 229)', marginRight: 10, fontSize: 16 }} />{item.name}</h2>
                                                    </Col>
                                                )
                                            }
                                        })
                                    }

                                </Row>
                            </Form>
                        </Spin>
                        <div>
                        </div>
                    </div>

                    <div className={styles.Bottom_Box}>
                        <Spin size='lage' spinning={this.state.spinning} >
                            <div style={{ color: '#fff', width: 136, height: 32, background: 'rgba(0,171,187,1)', borderRadius: 14, textAlign: 'center', lineHeight: '32px', cursor: 'pointer' }} onClick={this.onModalSave}>保存</div>
                        </Spin>
                        <Spin size='lage' spinning={this.state.spinning} >
                        <div style={{ color: 'red', width: 136, height: 32, background: '#fff', borderRadius: 14, textAlign: 'center', lineHeight: '32px', border: '1px solid #ccc', cursor: 'pointer' }} onClick={this.fanhui}>关闭</div>
                        </Spin>
                    </div>

                </div>
            </div>

        );


    }
}
export default Form.create()(Edit_Wrap);

